<template>
	<view class="fabuContent">
		<view class="formContent">
			<!-- 自定义定位组件 -->
			<location @watchPosition="watchComPosition"></location>
			<u--form labelPosition="left" :model="model" ref="form1" labelWidth="auto">
				<u-form-item label="姓名" prop="userInfo.name" borderBottom ref="item1">
					<u--input v-model="model.userInfo.name" border="none" placeholder="请输入姓名"></u--input>
				</u-form-item>
				<u-form-item label="联系电话" prop="userInfo.phone" borderBottom ref="item1">
					<u--input v-model="model.userInfo.phone" border="none" placeholder="请输入联系电话"></u--input>
				</u-form-item>
				<u-form-item label="位置" prop="userInfo.position" borderBottom ref="item1">
					<u--input v-model="model.userInfo.position" border="none" disabled></u--input>
				</u-form-item>
				<u-form-item label="详细位置描述" prop="userInfo.positionInfo" borderBottom ref="item1">
					<u--textarea v-model="model.userInfo.positionInfo" placeholder="请描述详细位置信息" autoHeight boder>
					</u--textarea>
				</u-form-item>
				<u-form-item label="情况描述" prop="userInfo.circumstances" borderBottom ref="item1">
					<u--textarea v-model="model.userInfo.circumstances" placeholder="请描述目前情况" autoHeight boder>
					</u--textarea>
				</u-form-item>
				<u-form-item label="紧急程度" prop="userInfo.UrgentDegree" borderBottom ref="item1">
					<view class="urgentBtnBox">
						<!-- 我写了个什么？？ 我也不知道这是不是最好的解决方案 -->
						<!-- 0：暂不请 1：中等 2：紧急-->
						<view class="urgentBtnone urgentBtn" @click="urgetDreggBtn(2)"
							:class="{btnIsActive:2 == btnIsActiveIndex}">紧急</view>
						<view class="urgentBtntwo urgentBtn" @click="urgetDreggBtn(1)"
							:class="{btnIsActive:1 == btnIsActiveIndex}">中等</view>
						<view class="urgentBtnthree urgentBtn" @click="urgetDreggBtn(0)"
							:class="{btnIsActive:0 == btnIsActiveIndex}">暂不清</view>
					</view>
				</u-form-item>
			</u--form>
		</view>
		<view class="subBtnContnt">
			<view class="subBtnBox">
				<u-button class="subBtn" type="primary" @click="submit" text="提交" size="large"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import location from '../../components/location/location.vue'
	import request from '@/utills/request.js'
	import getDateTime from '@/utills/getdateTime.js'

	export default {
		data() {
			return {
				model: {
					userInfo: {
						name: '',
						phone: '',
						position: '',
						positionInfo: '',
						circumstances: '',
						UrgentDegree: '',
						locationLatitude: '', //经度
						locationLongitude: '', //维度
					},
				},
				rules: {
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur']
					},
					"userInfo.phone": [{
						type: 'number',
						required: true,
						message: '请输入电话号码'
					}, {
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// uni.$u.test.mobile()就是返回true或者false的
							return uni.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change
						trigger: ['blur']
					}]
				},
				btnIsActiveIndex: -1, //三个按钮变色控制参数
			}
		},
		components: {
			location
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则 需要把标签上的rules匹配删除
			this.$refs.form1.setRules(this.rules)
		},
		methods: {
			watchComPosition(e) {
				// console.log(e);
				let p = e.data
				this.model.userInfo.position = p.province + p.city + p.district + p.positionInfo
				this.model.userInfo.locationLatitude = p.locationLatitude
				this.model.userInfo.locationLongitude = p.locationLongitude
			},
			urgetDreggBtn(index) {
				// console.log(index);
				this.model.userInfo.UrgentDegree = index
				this.btnIsActiveIndex = index
			},
			submit() {
				// console.log("yes");
				//表单校验
				this.$refs.form1.validate().then(res => {
					var date = getDateTime.getDate('y-m-d');
					var time = getDateTime.getTime('h:i:s');
					let info = this.model.userInfo;
					// console.log(info.name);
					uni.request({
						method: 'POST',
						url: this.baseurl + 'help/release',
						header: {
							"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
							"token": uni.getStorageSync('token')
						},
						data: {
							isUrgent: info.UrgentDegree,
							name: info.name,
							locationAddress: info.position,
							locationName: info.positionInfo,
							locationLatitude: info.locationLatitude,
							locationLongitude: info.locationLongitude,
							phone: info.phone,
							date: date,
							time: time,
							detail: info.circumstances,
						},
						success: (res) => {
							// console.log(res);
							uni.$u.toast('提交成功');
							// this.$refs.form1.resetFields();
							this.model.userInfo = {}
							this.model.userInfo.position = info.position
						}
					})
				}).catch(error => {
					console.log("error", error);
					uni.$u.toast('请正确填写表单')
				})
				// console.log(this.model.userInfo);

			}
		}
	}
</script>

<style scoped>
	.formContent {
		padding: 34.97rpx;
	}

	.subBtnContnt {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.subBtnBox {
		position: fixed;
		width: 90%;
		bottom: 30px;
	}

	.urgentBtnBox {
		display: flex;
		justify-content: space-around;
	}

	.urgentBtn {
		padding: 2px 8px;
		color: white;
		border-radius: 5px;
		opacity: 0.5;
	}

	.btnIsActive {
		opacity: 1 !important;
	}

	.urgentBtnone {
		background-color: rgb(244, 67, 54);
	}

	.urgentBtntwo {
		background-color: rgb(245, 124, 0);
	}

	.urgentBtnthree {
		background-color: rgb(67, 160, 71);
	}
</style>
